<template>
  <el-container>
    <!--查询条件开始-->
    <el-header height="1">
      <el-form ref="queryForm" :model="parmsValue.query" size="small" label-width="120px" class="middle-form">
        <el-row>
          <el-col :span="8">
            <el-form-item label="产品系列代码" prop="prod_series_code">
              <el-input v-model="parmsValue.query.prod_series_code" :clearable="true" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品系列名称" prop="prod_series_name">
              <el-input v-model="parmsValue.query.prod_series_name" :clearable="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-button type="success" size="small" @click="query">查询</el-button>
          <el-button type="info" size="small" @click="resetFields('queryForm')">重置</el-button>
          <el-button type="success" size="small" @click="showDialog('add')">新增</el-button>
        </el-row>
      </el-form>
    </el-header>
    <!--查询条件结束-->

    <!--列表开始-->
    <el-main>
      <table-pagination
        :table-data="table.prodSeries.tableData"
        :table-header-config="table.tableHeaderConfig"
        :operation-config="table.operationConfig"
        :total="table.prodSeries.total"
        :page-size="table.prodSeries.limit"
        :now-page="table.prodSeries.nowPage"
        :dict-data="dict"
        @current-change="currentChange"
      />
    </el-main>
    <!--列表结束-->

    <!--弹框表单开始-->
    <el-dialog :title="editModStr" :visible.sync="parmsValue.updateOpen" :before-close="handleClose">
      <el-form ref="updateForm" :model="parmsValue.update" label-width="120px" size="small" :rules="form.rules">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="prod_series_code" label="产品系列代码">
              <el-input v-model="parmsValue.update.prod_series_code" :clearable="true" :disabled="parmsValue.editMod === 'update'" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="prod_series_name" label="产品系列名称">
              <el-input v-model="parmsValue.update.prod_series_name" :clearable="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="prod_brand" label="产品品牌">
              <el-input v-model="parmsValue.update.prod_brand" :disabled="parmsValue.editMod === 'update'" :clearable="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="prod_name_rule" label="命名规则">
              <el-select v-model="parmsValue.update.prod_name_rule" :clearable="form.clearable">
                <el-option v-for="(item, index) in dict.prod_name_rule" :key="index" :label="item" :value="index" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="info" size="small" @click="closeDialog">取消</el-button>
        <el-button type="success" size="small" @click="updateProdSeries">确定</el-button>
      </div>
    </el-dialog>
    <!--弹框表单结束-->

  </el-container>
</template>

<script>
  import { formItems } from '@/utils/formItems'
  import * as kk from '@/utils/k-utils'
  import request from '@/utils/request'
  import axios from 'axios'

  export default {
    data() {
      return {
        dict: {
          prod_name_rule: {}
        },
        table: {
          tableHeaderConfig: [
            formItems.prodSeriesCode, formItems.prodSeriesName, formItems.prodNameRule, formItems.prodBrand, formItems.prodPeriods
          ],
          operationConfig: {
            fixed: 'left',
            width: 160,
            operationButton: [
              { value: '修改', func: params => this.showDialog('update', params) },
              { value: '删除', func: params => this.deleteProdSeries(params) }
            ]
          },
          prodSeries: {
            tableData: [],
            total: 100,
            exeid: 'getProdSeries',
            limit: 10,
            nowPage: 1
          }
        },
        form: {
          rules: {
            prod_series_code: [{ required: true, message: '请输入产品系列名称', trigger: 'change' }],
            prod_series_name: [{ required: true, message: '请输入产品系列名称', trigger: 'change' }],
            prod_brand: [{ required: true, message: '请输入产品品牌', trigger: 'change' }],
            prod_name_rule: [{ required: true, message: '请选择命名规则', trigger: 'change' }]
          }
        },
        parmsValue: {
          // 查询字段值
          query: { prod_series_name: '', prod_series_code: '' },
          // 增删改字段值
          update: { prod_series_name: '', prod_series_code: '', prod_brand: '', prod_name_rule: '' },
          updateOpen: false,
          editMod: 'update'
        }
      }
    },
    computed: {
      editModStr() {
        switch (this.parmsValue.editMod) {
        case 'update':
          return '修改产品系列'
        case 'add':
          return '新增产品系列'
        case 'detail':
        default:
          return '产品系列详情'
        }
      }
    },
    // 生命周期开始
    activated() {
      this.init()
    },
    // 生命周期结束
    methods: {
      init() {
        const dictReq = []
        const dicts = ['t8_prod_series_name']
        dicts.forEach(key => dictReq.push(request({
          url: 'system/base/dict/' + key + '.json',
          method: 'post',
          loading: true
        })))
        axios.all(dictReq).then(axios.spread((prod_name_rule) => {
          this.dict['prod_name_rule'] = prod_name_rule
          this.loadTable()
        }))
      },

      query() {
        this.table.prodSeries.nowPage = 1
        this.loadTable()
      },

      resetFields(form) {
        this.$refs[form].resetFields()
      },
      /**
       * 页码监听
       */
      currentChange(index) {
        this.table.prodSeries.nowPage = index
        this.loadTable()
      },

      /**
       * 加载表格数据
       */
      loadTable() {
        this.table.prodSeries.prod_series_name = this.parmsValue.query.prod_series_name
        this.table.prodSeries.prod_series_code = this.parmsValue.query.prod_series_code
        kk.k_load_table(this, 'prodSeries', formItems.PROD)
      },

      /**
       * 显示弹框
       */
      showDialog(editMod, params = {}) {
        switch (editMod) {
        case 'add':
          this.parmsValue.editMod = 'add'
          this.parmsValue.updateOpen = true
          break
        case 'update':
          this.parmsValue.editMod = 'update'
          this.parmsValue.updateOpen = true
          this.$nextTick(() => {
            Object.assign(this.parmsValue.update, params)
          })
          break
        default:
        }
      },

      /**
       * 弹框关闭逻辑
       */
      handleClose(done) {
        this.resetFields('updateForm')
        done()
      },
      closeDialog() {
        this.parmsValue.updateOpen = false
        this.resetFields('updateForm')
      },

      /**
       * 删除产品系列
       * @param params
       */
      deleteProdSeries(params) {
        this.$confirm('确认删除产品系列吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          kk.k_update_exeid(formItems.PROD, 'delProdSeries', params).then(resp => {
            if (resp.success) {
              this.loadTable()
            }
          })
        }).catch(() => {
        })
      },

      /**
       * 更新产品系列
       */
      updateProdSeries() {
        let exeid = ''
        switch (this.parmsValue.editMod) {
        case 'update':
          exeid = 'updateProdSeries'
          break
        case 'add':
        default:
          exeid = 'addProSeries'
          break
        }

        this.$refs['updateForm'].validate(valid => {
          if (valid) {
            kk.k_update_exeid(formItems.PROD, exeid, this.parmsValue.update).then(resp => {
              if (resp.success) {
                this.closeDialog()
                this.loadTable()
              }
            })
          }
        })
      }

    }
  }
</script>

